Day-22 ASP.NET MVC 之檔案上傳

2023 iThome 鐵人賽

DAY 22

Software Development

ASP.NET MVC基礎修練：從菜開始系列第 22 篇

15th鐵人賽

Nash

2023-10-07 00:41:41

528 瀏覽

分享至

在網站的目錄加一個files 的資料夾
先加一個 File 的 Controller
程式如下:

public class FileController : Controller
    {
        //
        // GET: /File/

        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(HttpPostedFileBase file)
        {
       
            if (file != null)
            {
                string filePath = Server.MapPath("~/uploadfiles/") + file.FileName;  
                file.SaveAs(filePath);
                return Content("<script>alert('上傳成功！');location.href='" + Url.Content("~/uploadfiles") + "'</script>");
            }
            return View("Index");
        }

    }

public ActionResult Index() 是一個 HTTP GET 方法，用於處理顯示上傳表單的請求。
當用戶瀏覽到該控制器的動作時（例如 /File/Index），它會返回一個 View，
這個 View 通常是一個 HTML 表單，允許用戶選擇要上傳的文件。

[HttpPost] 標註表示以下的方法處理 HTTP POST 請求，也就是當用戶提交了上傳表單時觸發的操作。
public ActionResult Index(HttpPostedFileBase file)
是一個接受 HttpPostedFileBase 類型參數的方法，這是用於處理接收到的文件的方法。
在方法內，首先檢查 file 參數是否為空，如果不為空，表示用戶已經選擇了要上傳的文件。

Server.MapPath("~/uploadfiles/") 用於獲取伺服器上的實際文件系統路徑，
~/uploadfiles/ 是文件上傳後的存放路徑。
file.SaveAs(filePath) 用於將接收到的文件保存到伺服器上的指定路徑，
filePath 是伺服器上保存文件的完整路徑。

return Content("alert('上傳成功！');location.href='" + Url.Content("~/uploadfiles") + "'") 這一行代碼返回一個包含 JavaScript 腳本的 Content 結果。
它會彈出一個瀏覽器提示框，顯示 "上傳成功！"，然後將用戶重新導向到文件上傳後的頁面，即 /uploadfiles。
如果 file 為空，表示用戶未選擇要上傳的文件，則返回 View("Index")，即重新顯示上傳表單。

畫面的程式如下

@{
    ViewBag.Title = "文件上傳";
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>文件上傳</title>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
        }

        h2 {
            color: #333;
        }

        .upload-container {
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            margin: 20px auto;
            width: 80%;
            max-width: 400px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        input[type="file"] {
            margin: 10px 0;
        }

        input[type="submit"] {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }

            input[type="submit"]:hover {
                background-color: #0056b3;
            }
    </style>
</head>
<body>
    <div class="upload-container">
        <h2>文件上傳</h2>
        @using (Html.BeginForm("Index", "File", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            <input type="file" name="file" />
            <br />
            <input type="submit" name="upload" value="提交" />
        }
    </div>
</body>
</html>

RouteConfig 也要做調整
Controller 設成 File

相關程式如下：

  public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "File", action = "Index", id = UrlParameter.Optional }
            );
        }

執行畫面如下